<template>
  <!--行业达人 -->
  <div class="tctk">
    <!-- 主体 -->
    <div class="container">
      <div class="top_strip">
        <div class="account">
          <div class="line"></div>
          <div class="setup">账号设置</div>
        </div>
        <div class="iconfont cancel" @click="returnpage">&#xe608;</div>
      </div>
      <div class="action">
        <my-button bgc="#F78385" fontColor="#fff" class="button" @click="jump"
          >扫码添加</my-button
        >
        <div class="iconfont icon" @click="refresh">&#xe74a;</div>
      </div>
      <div class="table">
        <el-table
          v-if="tableHeight"
          border
          :data="dataSource"
          :height="tableHeight"
          row-class-name="row-class-name"
          header-row-class-name="header-row-class-name"
          style="width: 100%"
        >
          <el-table-column
           class-name ="index-column"
            prop="index"
            label="序号"
            width="80"
          ></el-table-column>
          <el-table-column
            prop="label"
            label="用户"
            min-width="500"
          ></el-table-column>

          <el-table-column label="操作" width="151">
            <template slot-scope="scope">
              <my-button bgc="#fff" border="#DCDCDF" fontColor="#88898E" @click="deleteRow(scope.row)"
                >删除</my-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- ---------------- 弹窗 ---------------- -->
    <!-- 确认弹窗 -->
    <my-dialog-confirm
      :show.sync="showConfirm"
      @confirm="confirmDelete"
    ></my-dialog-confirm>
  </div>
</template>

<script>
import myButton from "@/components/myButton.vue";
import myDialogConfirm from "@/components/myDialogConfirm.vue";
export default {
  components: {
    myButton,
    myDialogConfirm,
  },
  data() {
    return {
      showConfirm: false,
      selectedRow: {},
      dataSource: [],
      tableHeight: 0,
      timer: null,
    };
  },
  mounted() {
    this.tableHeight = document.querySelector(".table").offsetHeight;
    window.onresize = () => {
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.tableHeight = document.querySelector(".table").offsetHeight;
      }, 500);
    };
    this.getData();
  },
  beforeDestroy() {
    window.onresize = null;
  },
  methods: {
    //列表
    async getData() {
      let res = await this.$api.tctk_getList({
        qr_type: "json",
      });
      let arr = [];
      for (let key in res.data) {
        arr.push({
          label: res.data[key],
          value: key,
        });
      }
      arr.forEach((item, index) => {
        item.index = index + 1;
      });
      this.dataSource = arr;
    },

    // 删除
    deleteRow(row) {
      this.selectedRow = row;
      this.showConfirm = true;
    },
    async confirmDelete() {
      await this.$api.tctk_deletelist({
        type: "delete",
        openid: this.selectedRow.value,
        qr_type: "json",
      });
      this.showConfirm = false;
      this.getData();
    },
    //返回首页
    returnpage() {
      this.$router.push({ name: "tctk" });
    },
    //扫码添加
    jump() {
      let person = window.localStorage.getItem("person");
      person = JSON.parse(person);

      window.open(
        "https://open.douyin.com/platform/oauth/connect/?client_key=aw7a43ouuhmtykph&response_type=code&scope=user_info,video.create,video.data,data.external.item,mobile,item.comment&redirect_uri=https://dspapi.appletcloud.net/index/callback/atuser/&state=" +
          person.username
      );
      this.getData();
    },
    // 刷新
    refresh() {
      this.getData();
    },
  },
};
</script>

<style lang="less" scoped>
.tctk {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 32px 0 0px 0;
  box-sizing: border-box;
}

.container {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 30px 0 80px 0;
  box-sizing: border-box;
  background-color: #fff;
  // 卡片里的标题
  .top_strip {
    position: absolute;
    top: 30px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: static;
    .account {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100px;
      height: 30px;
      margin: 15px 0 0 35px;
      .line {
        width: 5px;
        height: 17px;
        background-color: #387CF7;
        margin-right: 8px;
      }
      .setup {
        font-size: 15px;
        font-weight: bold;
      }
    }
    .cancel {
      margin-right: 20px;
      color: rgb(128, 133, 149);
      cursor: pointer;
      font-size: 10px;
      font-weight: bold;
    }
  }
  .action {
    width: 100%;
    //  height: 30px;
    //  background-color: green;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    .button {
      width: 114px;
      height: 30px;
      border-radius: 3px;
      margin-left: 45px;
    }
    .icon {
      margin-right: 45px;
      color: rgba(212, 212, 212);
      cursor: pointer;
    }
  }
  .table {
    width: 95%;
    height: 95%;
    // padding: 0 34px;
    box-sizing: border-box;
    margin: 0 auto;
    /deep/ .header-row-class-name {
      height: 45px;
      th {
        padding: 0;
        background-color: #f0f4ff;
        .cell {
          text-align: center;
          font-weight: bold;
          font-size: 13px;
          color: #333;
          padding: 0;
        }
      }
    }
    /deep/ .index-column{
      font-size: 14px;
      font-weight: bold;
    }
    /deep/ .row-class-name {
      height: 45px;
      td {
        padding: 0;
        height: 45px;
        .cell {
          display: flex;
          justify-content: center; 
          text-align: center;
          font-size: 12px;
          .button {
            width: 61px;
            height: 24px;
            border-radius: 5px;
            background-color: #EE0100;
          }
        }
      }
    }
    /deep/ .el-table__body-wrapper {
      &::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
        height: 10px;
      }
      &::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 5px;
        // box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: rgb(230, 228, 228);
      }
      &::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        // box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
        border-radius: 5px;
        background: #fff;
      }
    }
  }
}
.page {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 80px;
  /deep/ .active {
    background-color: #387CF7 !important;
  }
}
</style>